<template>
  <z-tree-select
    v-model:value="value"
    v-model:searchValue="searchValue"
    style="width: 240px"
    :tree-data="treeData"
    show-search
    :filterTreeNode="filterTreeOption"
    tree-default-expand-all
    allowClear
    :field-names="fieldNames"
  />
</template>
<script>
import { defineComponent, ref, computed } from 'vue'

export default defineComponent({
  name: 'TreeSelectDemo4',
  setup() {
    const value = ref()
    const fieldNames = computed(() => ({
      children: 'children',
      label: 'names',
      value: 'id'
    }))
    const treeData = ref([
      {
        names: '模',
        id: '1',
        children: [
          {
            names: '糊',
            id: '2',
            children: [
              {
                names: '搜',
                id: '3',
              },
              {
                names: '索',
                id: '4',
              },
            ],
          },
          {
            names: 'ccc',
            id: '5',
          },
        ],
      },
      {
        names: '树',
        id: '6',
        children: [
          {
            names: '选',
            id: '7',
            children: [
              {
                names: '择',
                id: '8',
              },
              {
                names: '框',
                id: '9',
              },
            ],
          },
          {
            names: '最后一个',
            id: '10',
          },
        ],
      },
    ])
    /* 树节点筛选 */
    const filterTreeOption = (input, treeNode) => {
      return treeNode.names.includes(input)
    }
    return {
      searchValue: ref(''),
      value,
      fieldNames,
      treeData,
      filterTreeOption,
    }
  },
})
</script>
